<template>
    <div>
        <div class="Banxin">
            <div class="carda" @click="BDtiaozhuan(item.typeId)" v-for="(item, index) in list" :key="index">
                <div class="toptitle">top{{ index }}</div>
                <div class="bottom">
                    <div><img :src="item.img" class="image" /></div>
                    <div>
                        <div class="bdTitle">{{ item.name }}</div>
                        <div class="bdTitle1">{{ item.title1 }}</div>
                        <div><el-rate v-model="item.star" disabled text-color="#ff9900" /></div>
                        <div class="bdTitle1">{{item.introduce}}</div>
                        <div>参考价<span class="bdpic">￥{{item.cost}}</span></div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { getTSBangDanX } from '../api/bangdan'
// console.log(route.query.value);
const list = ref([])
onMounted(async () => {
    let res = await getTSBangDanX()
    console.log(res.data.page.list);
    list.value = res.data.page.list

})
</script>

<style lang="scss" scoped>
.Banxin {
    box-sizing: border-box;
    width: 60%;
    height: 100%;
    margin: 0 auto;
    background-color: yellow;
    display: flex;
    flex-wrap: wrap;

    .carda {
        width: 100%;
        height: 300px;
        background-color: blue;
        margin-bottom: 30px;
        padding: 10px;
        padding-left: 40px;

        .toptitle {
            font-size: 30px;
            color: #FF8094;
        }

        .bottom {
            .image {
                width: 20%;
                height: 230px;
                display: block;
            }

            display: flex;
            justify-content: space-between;
            font-size: 15px;
            color: #333;

            .bdTitle {
                font-size: 30px;
            }

            .bdTitle1 {
                font-size: 15px;
                color: #666;
            }
            .bdpic{
                font-size: 30px;
                color:#FF8094;
            }
        }
    }
}
</style>